<!--
 * @Author: libing 9852442+liu-sheng-8667@user.noreply.gitee.com
 * @Date: 2024-04-12 22:40:10
 * @LastEditors: xuezhuangzhuang xzz6996@qq.com
 * @LastEditTime: 2025-02-27 20:15:15
 * @FilePath: \crm\pages\customer\conponents\order-item.vue
 * @Description: 订单item
-->
<template>
  <view
    class="order-item"
    @click="toPage('/pagescustomer/customer/order-info')"
  >
    <view class="order-item-header">
      <view class="header-code">订单 {{ item.id }}</view>
      <view class="header-status">{{ turnStatus(item.status) }}</view>
    </view>
    <view class="order-item-bottom">
      <view class="item-wrap">
        <view class="item-label">对应客户</view>
        <view class="item-value">{{ item.custom || "-" }}</view>
      </view>
      <view class="item-wrap">
        <view class="item-label">下单人</view>
        <view class="item-value">{{ item.customContacts || "-" }}</view>
      </view>
      <view class="item-wrap">
        <view class="item-label">所属客服</view>
        <view class="item-value">{{ item.customerService || "-" }}</view>
      </view>
    </view>
  </view>
</template>
<script>
import { STATUS_STATUS_MAP, PAY_STATUS_MAP } from "@/contacts/order";
export default {
  name: "order-item",
  data() {
    return {
      STATUS_STATUS_MAP,
      PAY_STATUS_MAP,
    };
  },
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    // 跳转订单详情
    toPage(path) {
      uni.navigateTo({
        url: path + "?id=" + this.item.id + "&from=photo",
      });
    },
    turnStatus(data) {
      // TO_COMMIT  待分配  PROCESSING 处理中 COMMIT 已完成 CANCEL
      if(data === 'TO_COMMIT') return '待分配'
      if(data === 'PROCESSING') return '处理中'
      if(data === 'COMMIT') return '已完成'
      if(data === 'CANCEL') return '问题单'
    }
  },
};
</script>
<style lang="scss" scoped>
.order-item {
  padding: 24rpx;
  background: #ffffff;
  margin-bottom: 18rpx;
  border-radius: 16rpx;
  &-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 22rpx;
    .header-code {
      font-size: 24rpx;
      color: #131517;
      line-height: 33rpx;
    }
    .header-status {
      background: #f2f2f3;
      border-radius: 4rpx;
      font-size: 24rpx;
      color: #838589;
      line-height: 33rpx;
      text-align: center;
      padding: 2rpx 20rpx;
    }
  }
  &-bottom {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 32rpx;
    background: #f4f6fa;
    border-radius: 16rpx;
    .item-label {
      font-size: 24rpx;
      color: #838589;
      line-height: 33rpx;
      margin-bottom: 8rpx;
    }
    .item-value {
      font-size: 28rpx;
      color: #171a1d;
      line-height: 40rpx;
    }
  }
}
</style>
